<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>资质审查</title>
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="./css/infoList2.css">
    <link rel="stylesheet" href="./element/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <!-- 步骤条 -->
        <div class="stepsBox">
            <el-button @click="onRefresh" icon="el-icon-refresh" size="mini" class="btnCl">刷新</el-button>
            <el-steps direction="vertical" :active="active" size="small">
                <el-step title="企业资料"></el-step>
                <el-step title="产品类型"></el-step>
                <el-step title="产品资料"></el-step>
            </el-steps>
        </div>
        <div class="mainBox">
            <!-- 企业资料 -->
            <template v-if="active==0">
                <el-button size="mini" @click="addCompany" class="btnCl">新增企业</el-button>
                <el-table :data="companyList" style="width: 100%" border
                    :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                    <el-table-column prop="companyName" label="企业名称"></el-table-column>
                    <el-table-column label="营业执照">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px; border-radius:8px;" fit="cover"
                                :preview-src-list="[path + 'qualFile/' + item]" :src="path + 'qualFile/' + item"
                                v-for="(item, index) in scope.row.companyImgList" :key="index"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="companyEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 产品类型 -->
            <template v-if="active==1">
                <div v-for="(item,index) in proTypeList" :key="index">
                    <div class="infoLine">
                        <span>企业名称：</span>
                        <el-select size="small" v-model="item.companyName" placeholder="请选择企业" @change="selectComHandle"
                            @visible-change="showHandle(index,'company')">
                            <el-option :label="ele.companyName" :value="ele.companyId"
                                v-for="(ele,eIndex) in companyList" :key="eIndex"></el-option>
                        </el-select>
                    </div>
                    <div v-if="item.companyId!=''" class="infoLine">
                        <span>产品类型：</span>
                        <el-select size="small" v-model="item.typeName" placeholder="请选择产品类型" @change="selectTypeHandle"
                            @visible-change="showHandle(index,'type')">
                            <el-option :label="ele.name" :value="ele.id" v-for="(ele,eIndex) in actions"
                                :key="eIndex"></el-option>
                        </el-select>
                    </div>

                    <div class="infoLine" v-if="item.companyId!=''&&item.typeName!=''&&item.qualId!=0">
                        <div>
                            <span>资质审核状态：</span>
                            <van-tag type="primary" size="small" v-if="item.status==0">审核中</van-tag>
                            <van-tag type="success" size="small" v-else-if="item.status==1">审核通过</van-tag>
                            <van-tag type="danger" size="small" v-else-if="item.status==2">审核驳回</van-tag>
                            <span>
                                <template v-if="item.status==0">
                                    请耐心等待
                                </template>
                                <template v-if="item.status==1&&item.feedback">
                                    备注：{{item.feedback}}
                                </template>
                                <template v-if="item.status==2">
                                    驳回原因：{{item.feedback}}
                                </template>
                            </span>
                        </div>
                    </div>
                    <div class="infoLine" v-for="(ele,eIndex) in item.ziZhiList" :key="eIndex">
                        <span>{{ele.comQualName}}</span>
                        <div class="imgList" v-if="ele.imgList.length!=0">
                            <div v-for="(imgItem,imgIndex) in ele.imgList">
                                <template v-if="imgItem.type!='pdf'&&imgItem.type!='doc'">
                                    <el-image style="width: 110px; height: 110px; border-radius:8px;" fit="cover"
                                        :preview-src-list="[path + 'qualFile/' + imgItem.img]"
                                        :src="path + 'qualFile/' + imgItem.img"></el-image>
                                    <div class="delIcon" v-if="item.status!=1"><van-icon name="cross"
                                            @click.stop="delImg(item.ziZhiList,eIndex,imgIndex)" />
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="fileBox">
                                        <i class="el-icon-document" v-if="imgItem.type=='doc'"></i>
                                        <i class="el-icon-tickets" v-if="imgItem.type=='pdf'"></i>
                                        <el-button @click="showFile(imgItem.img,imgItem.type)"
                                            size="mini">预览{{imgItem.type=='pdf'?'PDF文件':'文档'}}</el-button>

                                        <div class="delIcon" v-if="item.status!=1"><van-icon name="cross"
                                                @click.stop="delImg(item.ziZhiList,eIndex,imgIndex)" />
                                        </div>
                                    </div>
                                </template>

                            </div>
                        </div>
                        <div class="uploader" @click="typeId=ele.qualProductId;ziZhiId=ele.comQualId"
                            v-if="uploadShowFlag&&item.status!=1">
                            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="9" multiple
                                :on-change="typeChange">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <template v-if="file.name.indexOf('pdf')!=-1">
                                        <div class="fileBox">
                                            <i class="el-icon-tickets"></i>
                                            <span>{{file.name}}</span>
                                        </div>
                                    </template>
                                    <template v-else-if="file.name.indexOf('doc')!=-1">
                                        <div class="fileBox">
                                            <i class="el-icon-document"></i>
                                            <span>{{file.name}}</span>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                    </template>
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview"
                                            @click="handlePictureCardPreview(file)" v-if="file.name.indexOf('doc')==-1">
                                            <i class="el-icon-zoom-in"></i>
                                        </span>
                                        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                            <i class="el-icon-delete"></i>
                                        </span>
                                    </span>
                                    <!-- <div>{{file}}</div> -->
                                </div>
                            </el-upload>
                        </div>
                    </div>


                </div>
            </template>


            <!-- 产品资料 -->
            <template v-if="active==2">
                <div>
                    <div class="infoLine">
                        <span>企业名称：</span> {{proInfo.companyName}}
                    </div>
                    <div class="infoLine">
                        <span>产品类型：</span>{{proInfo.typeName}}
                    </div>
                    <div class="infoLine">
                        <span>产品名称：</span>

                        <el-input placeholder="若新增产品，请直接输入产品名称" v-model="proInfo.productName" style="width: 500px;"
                            size="small">
                            <el-select size="small" v-model="selectProId" slot="append" placeholder="请选择产品类型"
                                style="width: 160px;" @change="selectProChange"
                                @visible-change="showHandle(0,'product')">
                                <el-option :label=" ele.name" :value="ele.id" v-for="(ele,eIndex) in proAction"
                                    :key="eIndex"></el-option>
                            </el-select>
                        </el-input>
                    </div>
                    <div class="infoLine" v-if="proInfo.productName!=''&&proInfo.qualId!=0&& proInfo.isHaveZiZhi">
                        <div>
                            <span>资质审核状态：</span>
                            <van-tag type="primary" v-if="proInfo.status==0">审核中</van-tag>
                            <van-tag type="success" v-else-if="proInfo.status==1">审核通过</van-tag>
                            <van-tag type="danger" v-else-if="proInfo.status==2">审核驳回</van-tag>
                            <span>
                                <template v-if="proInfo.status==0">
                                    请耐心等待
                                </template>
                                <template v-if="proInfo.status==1&&proInfo.feedback">
                                    备注：{{proInfo.feedback}}
                                </template>
                                <template v-if="proInfo.status==2">
                                    驳回原因：{{proInfo.feedback}}
                                </template>
                            </span>
                        </div>
                    </div>

                    <div class="infoLine" v-for="(ele,eIndex) in proInfo.ziZhiList" :key="eIndex">
                        <span>{{ele.proQualName}}</span>
                        <div class="imgList" v-if="ele.imgList.length!=0">
                            <div v-for="(imgItem,imgIndex) in ele.imgList">
                                <template v-if="imgItem.type!='pdf'&&imgItem.type!='doc'"> <el-image
                                        style="width: 100px; height: 100px; border-radius:8px;" fit="cover"
                                        :preview-src-list="[path + 'qualFile/' + imgItem.img]"
                                        :src="path + 'qualFile/' + imgItem.img"></el-image>
                                    <div class="delIcon" v-if="proInfo.status!=1"><van-icon name="cross"
                                            @click.stop="delImg(proInfo.ziZhiList,eIndex,imgIndex)" />
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="fileBox">
                                        <i class="el-icon-document" v-if="imgItem.type=='doc'"></i>
                                        <i class="el-icon-tickets" v-if="imgItem.type=='pdf'"></i>
                                        <el-button @click="showFile(imgItem.img,imgItem.type)"
                                            size="mini">预览{{imgItem.type=='pdf'?'PDF文件':'文档'}}</el-button>
                                        <div class="delIcon" v-if="proInfo.status!=1"><van-icon name="cross"
                                                @click.stop="delImg(proInfo.ziZhiList,eIndex,imgIndex)" />
                                        </div>
                                    </div>
                                </template>

                            </div>
                        </div>
                        <div class="uploader" @click="typeId=proInfo.typeId;ziZhiId=ele.proQualId"
                            v-if="uploadShowFlag&&proInfo.status!=1">
                            <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="9" multiple
                                :on-change="proChange">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                    <template v-if="file.name.indexOf('pdf')!=-1">
                                        <div class="fileBox">
                                            <i class="el-icon-tickets"></i>
                                            <span>{{file.name}}</span>
                                        </div>
                                    </template>
                                    <template v-else-if="file.name.indexOf('doc')!=-1">
                                        <div class="fileBox">
                                            <i class="el-icon-document"></i>
                                            <span>{{file.name}}</span>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                    </template>
                                    <span class="el-upload-list__item-actions">
                                        <span class="el-upload-list__item-preview"
                                            @click="handlePictureCardPreview(file)" v-if="file.name.indexOf('doc')==-1">
                                            <i class="el-icon-zoom-in"></i>
                                        </span>
                                        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                            <i class="el-icon-delete"></i>
                                        </span>
                                    </span>
                                </div>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <div class="save">
            <template v-if="active!=0">
                <!-- <el-button type="primary" @click="submitHandle"
                    v-if="!((active==2&&proInfo.status==1)||(active==1&&proTypeList[0].status==1))">保存</el-button> -->
                <div class="saveInfo" @click="submitHandle"
                    v-if="!((active==2&&proInfo.status==1)||(active==1&&proTypeList[0].status==1))">
                    <div>保存信息</div>
                </div>
            </template>
            <div class="pageBtn">
                <el-button size="small" :disabled="active==0" @click="stepHandle('up')">
                    <i class="el-icon-arrow-left"></i>
                    上一步</el-button>
                <el-button size="small" :disabled="active==2" @click="stepHandle('down')">
                    下一步
                    <i class="el-icon-arrow-right"></i></el-button>
            </div>
        </div>


        <!-- 查看pdf -->
        <el-dialog :visible.sync="pdfDia" width="80%" top="2vh">
            <iframe :src='pdfUrl' width="100%" height="600px"> </iframe>
        </el-dialog>

        <!-- 企业资料 -->
        <el-dialog title="企业资料" :visible.sync="companyDia" width="30%" :before-close="comClose">
            <el-form :model="companyEditObj" :rules="comFormRule" ref="comForm" label-width="100px">
                <el-form-item label="企业名称" prop="companyName">
                    <el-input v-model="companyEditObj.companyName" placeholder="请输入企业名称"></el-input>
                </el-form-item>
                <el-form-item label="营业执照">
                    <template v-if="companyEditObj.companyImgList.length!=0">
                        <div class="imgList">
                            <div v-for="(imgItem,imgIndex) in companyEditObj.companyImgList" :key="imgIndex"
                                style="width: 102px; height: 102px; border-radius:8px;">
                                <el-image style="width: 102px; height: 102px; border-radius:8px;" fit="cover"
                                    :preview-src-list="[path + ' qualFile/' + imgItem]"
                                    :src="path + 'qualFile/' + companyEditObj.companyImgList"></el-image>
                                <div class="delIcon"><van-icon name="cross" @click.stop="delComImg(imgIndex)" />
                                </div>
                            </div>
                        </div>
                    </template>
                    <el-upload action="aa" class="avatar-uploader" :on-change="comChange" :auto-upload="false"
                        accept="*" ref="editProduct_pic" :show-file-list="false" v-else>
                        <img v-if="companyEditObj.uploadImgList.length!=0" :src="companyEditObj.imageUrl"
                            class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="comClose">取 消</el-button>
                <el-button type="primary" @click="comSubmit">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible" width="25%">
            <div class="diaBox">
                <img style="width: 300px;height: 300px;" :src="dialogImageUrl" alt="">
            </div>
        </el-dialog>










        <div class="mask" v-if="mask">
            <img src="../../img/load.gif">
        </div>
    </div>


    <script src="../../js/vue.min.js"></script>
    <script src="../../js/flex_ible/lib-flexible.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/vant.min.js"></script>
    <script src="./element/element.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/ajax.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script>


        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                code: '',
                active: 0,// 步骤条

                // 企业列表
                companyList: [
                    {
                        companyId: '',
                        companyName: '',
                        companyImgList: [],
                        uploadImgList: [],
                        state: ''
                    }
                ],

                // 产品类型
                proTypeList: [
                    {
                        companyId: '',
                        companyName: '',
                        typeId: '',
                        typeName: '',
                        ziZhiList: []
                    }
                ],
                selectIndex: -1,// 所选类型索引
                actions: [],// 产品类型 
                showType: false,// 产品类型弹窗
                showCom: false,// 选择公司弹窗
                // 公司列表
                comList: [{ id: 1, name: '诚赉健康' }, { id: 2, name: '网络科技' }],

                // 产品资料
                proInfo: {
                    companyId: '',
                    companyName: '',
                    typeId: '',
                    typeName: '',
                    productName: '',
                    ziZhiList: []
                },
                allTypeList: [],// 全部分类
                companyInputVal: '',// 文本框公司名

                typeId: '',// 分类id
                ziZhiId: '',// 资质id

                showProduct: false,// 产品列表弹窗
                comProList: [
                    {
                        id: 1, name: '制氧机'
                    },
                    {
                        id: 2, name: '雾化器'
                    }
                ],// 当前公司该分类下的所有商品

                userId: localStorage.recordUserId,
                recordId: '',// 主记录信息

                ziZhiInfo: '',// 当前选择的公司的资质信息·
                isHaveZiZhi: false,// 当前所选公司的这个分类是否已上传过资质

                proList: [],// 当前公司已保存的所有产品
                proAction: [],// 根据类型筛选产品
                showDia: false,//新增产品弹窗
                isLoading: false,
                // pdfUrl: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/shopInfo/1754101651614442.pdf',
                // pdfUrl: 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/qualFile/1754378720704461.doc',
                pdfUrl: 'https://view.officeapps.live.com/op/embed.aspx?src=https://zbz-imgs.oss-cn-beijing.aliyuncs.com/qualFile/1754378720704461.doc',
                // pdfUrl: 'https://view.officeapps.live.com/op/embed.aspx?src=https://zbz-imgs.oss-cn-beijing.aliyuncs.com/shopInfo/1754101651614442.pdf',
                companyEditObj: {
                    companyImgList: [],
                    uploadImgList: []
                }, // 当前编辑得公司信息
                companyDia: false,
                comFormRule: {
                    companyName: [
                        { required: true, message: '请输入企业名称', trigger: 'blur' },
                    ],
                },
                dialogImageUrl: '',
                dialogVisible: false,
                selectProId: '',
                uploadShowFlag: true,
                pdfDia: false,
                typeObj: '',// 当前选中的类型

            },
            created() {
                if (localStorage.recordId) {
                    this.recordId = localStorage.recordId
                    console.log(this.recordId);
                    this.getType()
                    this.getData()
                }
            },
            methods: {
                onRefresh() {
                    this.getType()
                    this.getData()
                    if (this.active == 1) {
                        this.getComZiZhi(this.proTypeList[0].companyId)
                    } else if (this.active == 2) {
                        this.selectProId = ''
                        this.getComZiZhi(this.proInfo.companyId)
                    }
                },
                showFile(url, type) {
                    if (type == 'pdf') {
                        this.pdfUrl = 'https://zbz-imgs.oss-cn-beijing.aliyuncs.com/qualFile/' + url
                    } else if (type == 'doc') {
                        this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=https://zbz-imgs.oss-cn-beijing.aliyuncs.com/qualFile/' + url
                    }
                    console.log(type);

                    console.log(url);
                    console.log(this.pdfUrl);

                    this.pdfDia = true
                },
                uploadClick(index) {
                    console.log(index);

                },
                typeChange(file, fileList) {
                    var that = this;
                    console.log(file);
                    console.log(fileList);
                    // fileList.forEach(item => {
                    //     fileArr.push(item.raw)
                    // })
                    this.beforeRead(fileList)
                    console.log(this.proTypeList);

                    console.log(this.typeId);
                    console.log(this.ziZhiId);
                    this.proTypeList[0].ziZhiList.forEach(zItem => {
                        if (zItem.comQualId == that.ziZhiId) {
                            zItem.uploadImgList = fileList
                        }
                    })
                    console.log(this.proTypeList);
                },
                proChange(file, fileList) {
                    var that = this;
                    console.log(file);
                    console.log(fileList);
                    this.beforeRead(fileList)
                    console.log(this.proTypeList);

                    console.log(this.typeId);
                    console.log(this.ziZhiId);
                    this.proInfo.ziZhiList.forEach(zItem => {
                        if (zItem.proQualId == that.ziZhiId) {
                            zItem.uploadImgList = fileList
                        }
                    })
                    console.log(this.proInfo);
                },
                handleRemove(file) {
                    var that = this;
                    this.proTypeList[0].ziZhiList.forEach(zItem => {
                        if (zItem.comQualId == that.ziZhiId) {
                            var i = zItem.uploadImgList.findIndex(ele => {
                                return ele.name == file.name
                            })
                            console.log(i);
                            zItem.uploadImgList.splice(i, 1)
                        }
                    })

                    console.log(file);
                },
                handleProRemove(file) {
                    var that = this;
                    this.proInfo.ziZhiList.forEach(zItem => {
                        if (zItem.comQualId == that.ziZhiId) {
                            var i = zItem.uploadImgList.findIndex(ele => {
                                return ele.name == file.name
                            })
                            console.log(i);
                            zItem.uploadImgList.splice(i, 1)
                        }
                    })

                    console.log(file);
                },
                handlePictureCardPreview(file) {
                    console.log(file);

                    if (file.name.indexOf('pdf') != -1) {
                        this.pdfUrl = file.url
                        this.pdfDia = true
                    } else if (file.name.indexOf('doc') != -1) {
                        // // this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + file.url
                        // this.pdfUrl = file.url
                        // this.pdfDia = true

                    } else {
                        this.dialogImageUrl = file.url;
                        this.dialogVisible = true;
                    }



                },
                // 新增企业
                addCompany() {
                    this.companyDia = true
                    this.companyEditObj = {
                        companyId: '',
                        companyName: '',
                        companyImgList: [],
                        uploadImgList: []
                    }
                },
                comChange(file) {
                    console.log(file);
                    this.companyEditObj.imageUrl = URL.createObjectURL(file.raw);
                    this.companyEditObj.uploadImgList.push(file.raw);
                    console.log(this.companyEditObj);

                },
                // 保存公司信息
                comSubmit() {
                    this.$refs.comForm.validate((valid) => {
                        if (!valid) return

                        console.log(this.companyEditObj);
                        if (this.companyEditObj.companyId != '') {
                            if (this.companyEditObj.companyImgList.length == 0 && this.companyEditObj.uploadImgList.length == 0) {
                                this.$message.warning('请上传营业执照')
                                return
                            }
                            this.editComHandle(this.companyEditObj)
                        } else {
                            var formData = new FormData(), that = this;
                            if (this.companyEditObj.uploadImgList.length == 0) {
                                this.$message.warning('请上传营业执照')
                                return
                            }

                            console.log(this.companyEditObj);


                            this.companyEditObj.uploadImgList.forEach(item => {
                                formData.append("companyFile", item)
                            })

                            formData.append("recordId", that.recordId);
                            formData.append("userId", that.userId);
                            formData.append("companyNames", that.companyEditObj.companyName);

                            that.mask = true

                            var timer;
                            timer = setInterval(function () {
                                clearInterval(timer);
                                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                                xhr.open("post", newUrl + "qual/addQualCompany",
                                    false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                                xhr.onload = that.uploadComplete; //请求完成
                                xhr.onerror = that.uploadFailed; //请求失败
                                xhr.send(formData); //开始上传，发送form数据
                            }, 1000);
                        }

                    })
                },
                comClose() {
                    this.companyDia = false
                },
                // 编辑公司信息
                companyEdit(obj) {
                    this.companyDia = true
                    this.companyEditObj = JSON.parse(JSON.stringify(obj))
                    console.log(obj);
                },
                // 修改已保存的公司信息    flag  1 修改公司名  2 修改公司营业执照图片
                editComHandle(obj) {
                    console.log(obj);
                    var that = this, formData = new FormData();
                    formData.append("companyId", obj.companyId);
                    formData.append("recordId", that.recordId);
                    formData.append("userId", that.userId);
                    formData.append("companyName", obj.companyName);


                    if (obj.uploadImgList.length != 0) {
                        formData.append("companyFile", obj.uploadImgList[0]);
                    }

                    console.log('end');

                    this.mask = true
                    var timer;
                    timer = setInterval(function () {
                        clearInterval(timer);
                        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                        xhr.open("post", newUrl + "qual/editQualCompany",
                            false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                        xhr.onload = that.uploadComplete; //请求完成
                        xhr.onerror = that.uploadFailed; //请求失败
                        xhr.send(formData); //开始上传，发送form数据
                    }, 1000);
                },


                // 选择公司
                selectComHandle(pId) {
                    var name = '';
                    this.companyList.forEach(item => {
                        if (item.companyId == pId) {
                            name = item.companyName
                        }
                    })
                    console.log(pId);
                    console.log(name);
                    this.uploadShowFlag = false
                    this.proTypeList[this.selectIndex].companyId = pId
                    this.proTypeList[this.selectIndex].companyName = name
                    this.getComZiZhi(pId)
                    var that = this;
                    setTimeout(() => {
                        that.uploadShowFlag = true
                    }, 2);
                },

                selectProChange(id) {
                    console.log(id);
                    console.log(this.proAction);
                    var arr = this.proAction.filter(item => {
                        return item.id == id
                    })
                    console.log(arr);
                    this.selectProHandle(arr[0])
                },
                // 选择产品
                selectProHandle(obj) {
                    console.log(obj);
                    if (obj.id == 0) {  // 新添加产品
                        this.proInfo.qualId = ''
                        this.proInfo.productName = ''
                        this.proInfo.status = 0
                        this.proInfo.isHaveZiZhi = false
                        this.proInfo.ziZhiList.forEach(item => {
                            item.imgList = []
                        })
                    } else {
                        var that = this;
                        that.proInfo.ziZhiList.forEach(item => {
                            item.imgList = []
                            obj.imgList.forEach(ele => {
                                if (ele.id == item.proQualId) {
                                    item.imgList.push(ele)
                                }
                            })
                        })
                        this.proInfo.qualId = obj.qualId
                        this.proInfo.productName = obj.name
                        this.proInfo.status = obj.status
                        this.proInfo.feedback = obj.feedback
                        this.proInfo.isHaveZiZhi = true
                        console.log(this.proInfo);


                    }

                    console.log(obj);
                    console.log(this.proInfo);

                },


                // 显示企业弹窗  产品类型弹窗
                showHandle(index, flag) {
                    this.selectIndex = index
                    console.log(flag);
                    console.log(this.selectIndex);
                    if (flag == 'type') {
                        console.log(this.proTypeList[this.selectIndex]);
                        if (this.proTypeList[this.selectIndex].companyId == '') {
                            this.$message.warning('请选择企业')
                            return
                        }
                    } else if (flag == 'company') {
                    } else if (flag == 'product') {
                        if (!this.proAction.some(item => {
                            return item.id == 0
                        })) {
                            this.proAction.push({
                                id: 0, name: '添加产品', color: '#999'
                            })
                        }
                    }
                },

                // 保存 
                submitHandle() {
                    var formData = new FormData(), names = '', that = this;
                    if (this.active == 1) {   // 保存产品类型·
                        if (!this.isHaveZiZhi) {
                            var flag = this.proTypeList.some(item => {
                                return item.companyName == '' || item.typeName == '' || (item.ziZhiList.length != 0 && item.ziZhiList.some(ele => {
                                    return ele.uploadImgList.length == 0
                                }))
                            })
                            console.log(this.proTypeList);
                            if (flag) {
                                this.$message.warning('请填写完整产品类型信息')
                                return
                            }

                            console.log(this.proTypeList);

                            var obj = this.proTypeList[0]

                            // return
                            obj.ziZhiList.forEach(ele => {
                                ele.uploadImgList.forEach(item => {
                                    console.log(item.newFile);
                                    formData.append("comfile", item.newFile)
                                })
                            })
                            formData.append("userId", that.userId);
                            formData.append("companyId", obj.companyId);
                            formData.append("companyName", obj.companyName);
                            formData.append("qualProductName", 0);
                            formData.append("qualProductId", obj.typeId);

                            that.mask = true

                            that.uploadShowFlag = false

                            var timer;
                            timer = setInterval(function () {
                                clearInterval(timer);
                                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                                xhr.open("post", newUrl + "qual/addQual",
                                    false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                                xhr.onload = that.uploadComplete; //请求完成
                                xhr.onerror = that.uploadFailed; //请求失败
                                xhr.send(formData); //开始上传，发送form数据
                            }, 1000);

                        } else {
                            var flag = this.proTypeList.some(item => {
                                return item.ziZhiList.some(ele => {
                                    return ele.uploadImgList.length == 0 && ele.imgList.length == 0
                                })
                            })
                            console.log(this.proTypeList);
                            if (flag) {
                                this.$message.warning('请填写完整产品类型信息')
                                return
                            }

                            console.log(this.proTypeList);

                            var obj = this.proTypeList[0], imgName = '';

                            // return
                            obj.ziZhiList.forEach(ele => {
                                ele.uploadImgList.forEach(item => {
                                    console.log(item.newFile);
                                    formData.append("comfile", item.newFile)
                                })
                                ele.imgList.forEach(item => {
                                    imgName += item.url + ','
                                })
                            })

                            console.log(imgName);

                            formData.append("qualId", obj.qualId);
                            formData.append("companyId", obj.companyId);
                            formData.append("companyName", obj.companyName);
                            formData.append("qualProductName", 0);
                            formData.append("qualProductId", obj.typeId);
                            formData.append("qualImgs", imgName);
                            formData.append("status", 0);
                            formData.append("feedback", '');

                            console.log(obj);
                            that.uploadShowFlag = false
                            that.mask = true
                            var timer;
                            timer = setInterval(function () {
                                clearInterval(timer);
                                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                                xhr.open("post", newUrl + "qual/editQual",
                                    false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                                xhr.onload = that.uploadComplete; //请求完成
                                xhr.onerror = that.uploadFailed; //请求失败
                                xhr.send(formData); //开始上传，发送form数据
                            }, 1000);

                        }
                    } else if (this.active == 2) {

                        console.log(this.proInfo);
                        // return


                        if (!this.proInfo.isHaveZiZhi) {
                            if (this.proInfo.productName == '') {
                                this.$message.warning('请输入产品名称')

                                return
                            }

                            if (this.proInfo.ziZhiList.some(item => {
                                return item.uploadImgList.length == 0
                            })) {
                                this.$message.warning('请上传资质图片')
                                return
                            }

                            var obj = this.proInfo
                            obj.ziZhiList.forEach(ele => {
                                ele.uploadImgList.forEach(item => {
                                    console.log(item.newFile);
                                    formData.append("profile", item.newFile)
                                })
                            })

                            formData.append("userId", that.userId);
                            formData.append("companyId", obj.companyId);
                            formData.append("companyName", obj.companyName);
                            formData.append("qualProductName", obj.productName);
                            formData.append("qualProductId", obj.typeId);

                            that.mask = true
                            that.uploadShowFlag = false
                            var timer;
                            timer = setInterval(function () {
                                clearInterval(timer);
                                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                                xhr.open("post", newUrl + "qual/addQual",
                                    false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                                xhr.onload = that.uploadComplete; //请求完成
                                xhr.onerror = that.uploadFailed; //请求失败
                                xhr.send(formData); //开始上传，发送form数据
                            }, 1000);

                        } else {
                            var obj = this.proInfo, imgName = '';
                            if (this.proInfo.ziZhiList.some(item => {
                                return item.uploadImgList.length == 0 && item.imgList.length == 0
                            })) {
                                this.$message.warning('请上传资质图片')
                                return
                            }
                            // return
                            obj.ziZhiList.forEach(ele => {
                                ele.uploadImgList.forEach(item => {
                                    console.log(item.newFile);
                                    formData.append("profile", item.newFile)
                                })
                                ele.imgList.forEach(item => {
                                    imgName += item.url + ','
                                })
                            })


                            console.log(imgName);

                            formData.append("qualId", obj.qualId);
                            formData.append("companyId", obj.companyId);
                            formData.append("companyName", obj.companyName);
                            formData.append("qualProductName", obj.productName);
                            formData.append("qualProductId", obj.typeId);
                            formData.append("qualImgs", imgName);

                            formData.append("status", 0);
                            formData.append("feedback", '');

                            that.mask = true
                            that.uploadShowFlag = false
                            var timer;
                            timer = setInterval(function () {
                                clearInterval(timer);
                                xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
                                xhr.open("post", newUrl + "qual/editQual",
                                    false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                                xhr.onload = that.uploadComplete; //请求完成
                                xhr.onerror = that.uploadFailed; //请求失败
                                xhr.send(formData); //开始上传，发送form数据
                            }, 1000);

                        }


                    }
                },

                // 公司信息 上传成功 
                uploadComplete: function (evt) {
                    //服务断接收完文件返回的结果
                    var that = this
                    that.mask = false;
                    var data = JSON.parse(evt.target.responseText);
                    console.log(data);

                    if (data.flag) {
                        if (that.active == 0) {
                            that.getData()
                            that.comClose()
                        } else if (that.active == 1) {
                            that.getComZiZhi(that.proTypeList[0].companyId)
                            that.proTypeList[0].ziZhiList.forEach(zItem => {
                                zItem.uploadImgList = []
                            })
                            console.log(that.proTypeList[0]);

                            that.$forceUpdate()
                        } else if (that.active == 2) {
                            // that.getData()
                            that.proInfo.ziZhiList.forEach(zItem => {
                                zItem.uploadImgList = []
                            })
                            that.getComZiZhi(that.proInfo.companyId)

                            that.selectProId = ''
                        }
                        that.uploadShowFlag = true
                        that.mask = false;
                        that.$message.success({
                            position: 'bottom',
                            message: '保存成功'
                        });
                    } else {
                        that.$message.warning({
                            position: 'bottom',
                            message: '保存失败'
                        });
                    }
                },
                // 公司信息 上传失败
                uploadFailed: function (evt) {
                    this.mask = false;
                    this.$message.warning({
                        position: 'bottom',
                        message: '保存失败，请重试'
                    });
                },
                // 添加公司
                addCom() {
                    this.companyList.push({
                        companyId: '',
                        companyName: '',
                        companyImgList: [],
                        uploadImgList: [],
                        state: ''
                    })
                },

                // 上一步  下一步
                stepHandle(flag) {
                    if (flag == 'up') {
                        this.active -= 1
                    } else {
                        console.log(this.active);
                        console.log(this.selectIndex);
                        console.log(this.proTypeList[this.selectIndex]);

                        if (this.active == 0 && this.companyList.length == 0) {
                            this.$message.warning('请添加企业')
                            return
                        } else if (this.active == 1 && (this.selectIndex == -1 || this.proTypeList[this.selectIndex].companyId == '')) {
                            this.$message.warning('请选择企业')
                            return
                        } else if (this.active == 1 && this.proTypeList[this.selectIndex].ziZhiList.some(item => {
                            return item.imgList.length == 0
                        })) {
                            this.$message.warning('请先完善相关资质')
                            return
                        } else if (this.active == 1 && this.proInfo.typeId == '') {
                            this.$message.warning('请选择产品类型')
                            return
                        } else {
                            this.active += 1
                        }
                    }
                },
                // 返回
                onClickLeft() {
                    window.parent.postMessage('./step.html', '*')
                    console.log(window);
                    this.$forceUpdate()
                },



                // 获取该记录的公司列表
                getData() {
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/getQualCompanyListByRecordId",
                        type: 'post',
                        data: {
                            recordId: that.recordId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.mask = false
                            that.isLoading = false
                            if (res.flag) {
                                // qualFile

                                res.data = res.data.reverse()
                                that.companyList = []
                                that.comList = []

                                res.data.forEach(item => {
                                    that.comList.push({
                                        id: item.companyId,
                                        name: item.companyName
                                    })
                                    that.companyList.push({
                                        companyId: item.companyId,
                                        companyName: item.companyName,
                                        companyImgList: item.busLicence.split(' '),
                                        uploadImgList: [],
                                        state: item.state
                                    })
                                })
                                console.log(that.companyList);
                                console.log(res.data);
                            }
                        },
                    })
                },
                // /qual/getQual   获取公司的相关资质
                getComZiZhi(companyId) {
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/getQual",
                        type: 'post',
                        data: {
                            companyId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.mask = false
                            that.isLoading = false
                            if (res.flag) {
                                console.log(res.data);
                                that.ziZhiInfo = res.data
                                that.proList = []
                                res.data.qualMaterials.forEach(item => {
                                    item.imgList = []
                                    item.id = item.qualId
                                    item.name = item.qualProductName

                                    if (Object.keys(item.comMap).length != 0) {
                                        for (const key in item.comMap) {
                                            item.comMap[key].split(',').forEach(ele => {
                                                ele = ele.trim()
                                                var str = ele.split('.')[0].split('%')[0] + '.' + ele.split('.')[1]
                                                console.log(str);

                                                var type = '';
                                                console.log(str.indexOf('pdf') != -1);

                                                if (str.indexOf('pdf') != -1) {
                                                    type = 'pdf'
                                                } else if (str.indexOf('doc') != -1) {
                                                    type = 'doc'
                                                } else {
                                                    type = 'img'
                                                }

                                                item.imgList.push({
                                                    id: key,
                                                    img: str.trim(),
                                                    url: ele,
                                                    type
                                                })
                                            })
                                        }
                                    } else if (Object.keys(item.proMap).length != 0) {
                                        for (const key in item.proMap) {

                                            item.proMap[key].split(',').forEach(ele => {

                                                ele = ele.trim()
                                                var str = ele.split('.')[0].split('%')[0] + '.' + ele.split('.')[1]

                                                var type = '';
                                                console.log(str.indexOf('pdf') != -1);

                                                if (str.indexOf('pdf') != -1) {
                                                    type = 'pdf'
                                                } else if (str.indexOf('doc') != -1) {
                                                    type = 'doc'
                                                } else {
                                                    type = 'img'
                                                }
                                                item.imgList.push({
                                                    id: key,
                                                    img: str.trim(),
                                                    url: ele,
                                                    type
                                                })
                                            })
                                        }
                                    }

                                    if (item.qualProductName != null && item.qualProductName != '0') {
                                        that.proList.push(item)
                                    }
                                })

                                if (that.active == 1 && that.proTypeList[that.selectIndex].typeId != '') {
                                    var obj = {
                                        id: that.proTypeList[that.selectIndex].typeId,
                                        name: that.proTypeList[that.selectIndex].typeName,
                                    }
                                    that.selectHandle(obj)
                                }


                                that.proAction = JSON.parse(JSON.stringify(that.proList))

                                if (that.active == 2) {
                                    that.proAction = that.proList.filter(item => {
                                        return item.qualProductId == that.proInfo.typeId
                                    })
                                    var obj = {
                                        id: that.proTypeList[that.selectIndex].typeId,
                                        name: that.proTypeList[that.selectIndex].typeName,
                                    }
                                    that.selectHandle(obj)
                                }
                                console.log(res);
                                console.log(that.proList);
                            }
                        },
                    })
                },



                // 重命名文件
                resName(file, tId, zId) {
                    const tempFile = file
                    console.log(tempFile);

                    var arr = [];
                    arr = tempFile.name.split('.')
                    console.log(arr);
                    console.log(arr[arr.length - 1]);
                    const type = tempFile.type
                    console.log(type);
                    const size = tempFile.size
                    // const newName = arr[0] + '%' + tId + '%' + zId + '.' + arr[arr.length - 1]
                    const newName = arr[0] + '%' + zId + '.' + arr[arr.length - 1]
                    let uploadFile = new File([tempFile], newName, { type, size })
                    return uploadFile
                },
                beforeRead(file) {
                    console.log(file);

                    // if ()
                    console.log(Array.isArray(file));
                    // console.log(file.length);


                    if (Array.isArray(file)) {
                        file.forEach(ele => {
                            ele.newFile = this.resName(ele.raw, this.typeId, this.ziZhiId)
                        });
                    } else {
                        file.newFile = this.resName(file.raw, this.typeId, this.ziZhiId)
                    }



                    console.log(this.typeId);
                    console.log(this.ziZhiId)


                    // file.newFile = this.resName(file, this.typeId, this.ziZhiId)

                    return true

                },


                getType() {
                    var that = this;
                    this.mask = true
                    ajax({
                        url: newUrl + "qual/getQualProduct",
                        type: 'post',
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.isLoading = false
                            if (res.flag) {
                                that.actions = []
                                res.data.forEach(ele => {
                                    that.actions.push({
                                        id: ele.qualProductId,
                                        name: ele.productName
                                    })
                                })
                                that.allTypeList = JSON.parse(JSON.stringify(that.actions))
                                console.log(that.actions);
                                that.mask = false
                            }
                        },
                    })
                },

                selectTypeHandle(id) {
                    console.log(this.proTypeList[this.selectIndex].companyId);

                    this.selectComHandle(this.proTypeList[this.selectIndex].companyId)
                    console.log(id);
                    var that = this;
                    this.uploadShowFlag = false
                    var arr = [];
                    arr = this.actions.filter(item => {
                        return item.id == id
                    })
                    console.log(arr);
                    this.typeObj = arr[0]
                    this.selectHandle(arr[0])

                    setTimeout(() => {
                        that.uploadShowFlag = true
                    }, 2);


                },

                // 选择产品类型
                selectHandle(item) {
                    console.log(item);
                    var that = this
                    that.mask = true
                    ajax({
                        url: newUrl + "qual/getQualByProductId",
                        type: 'post',
                        data: { id: item.id },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            that.mask = false

                            if (res.flag) {
                                console.log(res.data);



                                console.log(that.ziZhiInfo.qualMaterials);


                                var arr = that.ziZhiInfo.qualMaterials.filter(ele => {
                                    return ele.qualProductId == item.id && Object.keys(ele.proMap).length == 0
                                })
                                // arr[0].imgList
                                console.log(arr);

                                // 是否已上传资质
                                that.isHaveZiZhi = arr.length != 0

                                res.data.qualComCategories.forEach(cItem => {
                                    cItem.uploadImgList = []
                                    cItem.imgList = []
                                    cItem.status = -1
                                    cItem.passNote = ''

                                    if (arr.length != 0) {
                                        arr[0].imgList.forEach(ele => {
                                            if (ele.id == cItem.comQualId) {
                                                cItem.imgList.push(ele)
                                            }
                                        })
                                    }
                                })

                                if (arr.length != 0) {
                                    that.proTypeList[that.selectIndex].status = arr[0].status
                                    that.proTypeList[that.selectIndex].feedback = arr[0].feedback
                                } else {
                                    that.proTypeList[that.selectIndex].status = 0
                                }
                                that.proTypeList[that.selectIndex].ziZhiList = res.data.qualComCategories
                                that.proTypeList[that.selectIndex].typeId = item.id
                                that.proTypeList[that.selectIndex].typeName = item.name
                                that.proTypeList[that.selectIndex].qualId = that.isHaveZiZhi ? arr[0].qualId : 0
                                console.log(that.proTypeList);


                                that.proInfo = {
                                    companyId: that.proTypeList[that.selectIndex].companyId,
                                    companyName: that.proTypeList[that.selectIndex].companyName,
                                    typeId: item.id,
                                    typeName: item.name,
                                    productName: '',
                                    ziZhiList: [],
                                    isHaveZiZhi: false
                                }

                                res.data.qualProCategories.forEach(pItem => {
                                    pItem.uploadImgList = []
                                    pItem.imgList = []
                                    pItem.status = -1
                                    pItem.passNote = ''
                                })
                                that.proInfo.ziZhiList = res.data.qualProCategories
                                console.log(that.proInfo);

                                that.proAction = that.proList.filter(item => {
                                    return item.qualProductId == that.proInfo.typeId
                                })

                                // 判断当前分类下是否有产品
                                // that.proInfo.isHaveZiZhi = that.proAction.length != 0

                                console.log(that.proInfo);



                            }
                        },
                    })


                },

                checkImg(list, flag, index) {
                    console.log(list);
                    console.log(path);
                    console.log(index);

                    var arr = [], str = '';
                    list.forEach(ele => {
                        if (flag == 1) {
                            str = path + 'qualFile/' + ele
                        } else if (flag == 2) {
                            str = path + 'qualFile/' + ele.img
                        }
                        arr.push(str)
                    })
                    console.log(arr);
                    vant.ImagePreview({
                        images: arr,
                        startPosition: index
                    });
                },
                delImg(list, index, imgIndex) {
                    console.log(list[index].imgList[imgIndex]);
                    // list[index].delImg.push(list[index].imgList[imgIndex])
                    list[index].imgList.splice(imgIndex, 1)
                    console.log(list);
                },


                // 删除公司营业执照
                delComImg(index) {
                    this.companyEditObj.companyImgList = []
                    this.$message.success('请上传新的营业执照')
                },


            }
        })



    </script>

</body>

</html>